import React from 'react'

export default class stateComponent extends React.Component{
    constructor(props){
        super(props)
        // 这个name就是一个状态，和vue中data一致
        
        this.state={
            name:1,
            flag:true
        }
        this.count=1
        console.log(22222222);
    }
    // rennder函数的执行在这个生命周期函数执行之前执行
    // 组件未挂载
    componentWillMount(){
        console.log(2);
    }
    componentDidMount(){
        console.log(1);
    }
    // 当发生影响视图的改变时，比如修改porps，修改state，那么，他就会走shouldComponentUpdate这个函数
    shouldComponentUpdate(){
        console.log(3);
        // update一定要返回一个bollean值？太奇怪了吧，返回有啥用
        return true
    }
    componentWillUpdate(){
        console.log(4);
    }
    componentDidUpdate(){
        console.log(5);
    }
    // 当有props从父级传过来的时候，这个prop在父级发生了变化，那么下面就会被执行
    componentWillReceiveProps(){
        console.log(6)
    }
    testFun(_this){
        // 没有必要这么做,直接用bind就可以了，call也可以?
        // bind是返回了一个函数，它可以
        // call和apply是执行了一遍函数，并且返回一个值，这个函数内部的this指向依旧不明确,当然传参就是另一回事了
        return function(){
            _this.setState({
                name:_this.state.name+=1
            })
            // console.log(++_this.count);
        }

        console.log(this);
        console.log(1);
        // this.setState
    }
    render(){
        return (
            <div>
                这是一个react组件
                {/* 比较神奇的是这里的bind（this） 的操作，具体为什么，不知道*/}
                <button onClick={this.testFun.call(this,this)}>{this.state.name}</button>
                <p>{this.state.flag?"我叫猴子":"我叫假猴子"}</p>
                <p>{this.props.temp}</p>
            </div>
        )
    }
}
